<template>
    <div>
        <div class="boxbox" style="height: 100%;overflow: hidden;">

            <div class="infobox">
                <ifPieOne :data="wj_trade_sx" v-if="role==18||role==19"></ifPieOne>
                <boxone class="boxsize" v-else style="height: 53rem;" :wj_trade_total_census="wj_trade_total_census" :wjdc_total="wjdc_total" :option="option1"></boxone>

                <boxfour class="boxsize" :option="option2" :prize_total_money="prize_total_money" :prize_sy_money="prize_sy_money" :prize_zj_money="prize_zj_money" style="height: 300px;margin-top: 15px;"></boxfour>

            </div>
            <div class="infobox " style=" margin-right: 1rem;">
                <dataAnalyze :data="dataAnalyzeList"></dataAnalyze>
                <lineDAta :data="prize_nums" :time="time"></lineDAta>
            </div>
            <div class="infobox">
                <ifPieTwo class="boxsize" :data="cy_people" :time="time" :day="day" v-if="role==18||role==19"></ifPieTwo>
                <boxtwo class="boxsize" :list="today_wj_total" :today_wj_people_total="today_wj_people_total" v-else></boxtwo>

                <boxtre class="boxsize" style="margin-top: 20px;" :list="managementCenter" @changeid="changeid" :option="optiomtre" :title="'活动参与人员身份'"></boxtre>
            </div>
        </div>
        <el-dialog title="通知" :visible.sync="dialogVisible" width="50%" center :close-on-click-modal="false" :close-on-press-escape="false" @close="close">
            <div class="showTitle">
                {{ showTitle }}
            </div>
        </el-dialog>

    </div>
</template>

<script>
import * as echarts from 'echarts';

import { get, post } from "@/assets/js/http.js";
import boxone from '../../components/boxone.vue'
import boxtwo from '../../components/boxtwo.vue'
import checkradio from '../../components/z-date-radio/index.vue'
import boxtre from '../../components/boxtre.vue'
import boxfour from '../../components/boxfour.vue'
import boxfive from '../../components/boxfive.vue'
import boxsix from '../../components/boxsix.vue'
import boxseven from '../../components/boxseven.vue'

let total = 0
export default {
    name: "view-sreen",
    components: {
        boxone, boxtwo, checkradio, boxtre, boxfour, boxfive, boxsix, boxseven,
        "dataAnalyze": () => import("@/components/comEcharts/dataAnalyze.vue"),
        "lineDAta": () => import("@/components/comEcharts/line.vue"),
        "ifPieOne": () => import("@/components/comEcharts/ifPieOne.vue"),
        "ifPieTwo": () => import("@/components/comEcharts/ifPieTwo.vue"),
    },
    data() {
        return {
            dialogVisible: false,
            day: null,
            showTitle: "",
            rt_total: 0,
            yb_total: 0,
            people_total: 0,
            brt_total: 0,
            today_wj_total: 0,
            today_wj_people_total: 0,
            id: '',//管理中心id
            type: '',//1当天，2最近七天，3总数
            today_wj_total: [],//今日问卷人数
            option1: {
                //  title: {
                // text: 'World Population'
                //  },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function (params, ticket, callback) {
                        return `
						  <div>
						  <div>${params[0].name}<div>
						  <div style="display:flex;align-items: center;height:30px">
						  <div style="width:15px;height:15px;background:red;border-radius:100%;margin-right:10px;"></div>
						  <p>完成数${params[0].value}</p >
						  </div>
							<div style="display:flex;align-items: center;height:30px">
							<div style="width:15px;height:15px;background:#5470c6;border-radius:100%;margin-right:10px;"></div>
							<p>目标数${params[1].value}</p >
							</div>
							<div style="display:flex;align-items: center;height:30px">
							<div style="width:15px;height:15px;background:#fac858;border-radius:100%;margin-right:10px;"></div>
							<p>完成率${(params[1].value ? (params[0].value / params[1].value) * 100 : 0).toFixed(2)}%</p >
							</div>
						</div>
							`
                    }
                },
                legend: {
                    textStyle: {
                        color: '#000'
                    },
                    top: '5%'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    axisLabel: {
                        textStyle: {
                            color: "#000",
                            fontSize: 13,
                        }
                    }
                },
                yAxis: {
                    type: 'category',
                    data: [],
                    axisLabel: {
                        textStyle: {
                            color: "#000",
                            fontSize: 13,
                        }
                    }
                },
                series: [
                    {

                        label: {
                            show: true,
                            position: 'right',
                        },
                        name: '问卷完成数',
                        type: 'bar',
                        data: [],
                        itemStyle: {
                            color: '#00BCF6'
                        }


                    },
                    {
                        label: {
                            show: true,
                            position: 'right',
                        },
                        name: '问卷目标数',
                        type: 'bar',
                        data: [],
                        itemStyle: {
                            color: '#E2CE73'
                        }
                    }
                ]
            },
            option2: {
                title: {
                    // text: 'World Population'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {},
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '5%',
                    top: "5%",
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    axisLabel: {
                        textStyle: {
                            color: "#000",
                            fontSize: 13,
                        }
                    }
                },
                yAxis: {
                    type: 'category',
                    data: [],
                    axisLabel: {
                        textStyle: {
                            color: "#000",
                            fontSize: 13,
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                },
                series: [
                    // {
                    //   name: '2011',
                    //   type: 'bar',
                    //   data: [18203, 23489, 29034, 104970, 131744, 630230]
                    // },
                    {
                        label: {
                            show: true,
                            position: 'right',
                        },

                        // name: '2012',
                        type: 'bar',
                        data: [],
                        barWidth: 20,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#00C4F7' },
                                { offset: 1, color: '#006AFF' }
                            ]),
                        },
                    }
                ]
            },
            optiomtre: {
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    textStyle: {
                        fontSize: 13,
                        color: "#000"
                    }
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        // dataView: { show: true, readOnly: false },
                        // restore: { show: true },
                        // saveAsImage: { show: true }
                    }
                },
                tooltip: {
                    trigger: "item",
                    // backgroundColor: "rgba(20, 31, 59, 0.7)",
                    textStyle: {
                        color: "#000",
                        fontSize: 13,
                    },
                    formatter: function (params) {
                        var value = params.value;
                        // return params.name + ': ' + value + '%'
                        return `${params.name}：${value}% <br/>人数：${params.data.num}`
                    }
                },
                series: [
                    {
                        type: 'pie',
                        center: ['50%', '50%'],
                        // roseType: 'area',
                        radius: [20, 100],
                        // center: ['25%', '50%'],
                        roseType: 'radius',
                        itemStyle: {
                            borderRadius: 5
                        },
                        label: {
                            show: false
                        },
                        emphasis: {
                            label: {
                                // show: true
                            }
                        },
                        data: [
                        ]
                    }
                ]
            },


            // 
            newoption: {
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    textStyle: {
                        fontSize: 13,
                        color: "#000"
                    }
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        // dataView: { show: true, readOnly: false },
                        // restore: { show: true },
                        // saveAsImage: { show: true }
                    }
                },
                tooltip: {
                    trigger: "item",
                    backgroundColor: "rgba(20, 31, 59, 0.7)",
                    textStyle: {
                        color: "#000",
                        fontSize: 13,
                    },
                    formatter: function (params) {
                        var value = params.value;
                        return params.name + ': ' + value + '%'
                    }
                },
                series: [
                    {
                        type: 'pie',
                        center: ['50%', '50%'],
                        // roseType: 'area',
                        radius: [20, 100],
                        // center: ['25%', '50%'],
                        roseType: 'radius',
                        itemStyle: {
                            borderRadius: 5
                        },
                        label: {
                            show: false
                        },
                        emphasis: {
                            label: {
                                // show: true
                            }
                        },
                        data: [
                        ]
                    }
                ]
            },
            optionfour: {
                color: [
                    {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: "rgba(37, 161, 229, 1)"
                            },
                            {
                                offset: 1,
                                color: "rgba(37, 161, 229, 0)"
                            }
                        ]
                    },
                ],
                tooltip: {
                    trigger: "axis",
                    backgroundColor: "rgba(20, 31, 59, 0.7)",
                    textStyle: {
                        color: "#000",
                        fontSize: 13,
                    }
                },
                legend: {
                    itemGap: 25,
                    textStyle: {
                        color: "#70C5FF",
                        fontSize: 13,
                    },
                    // data: ["男", "女", "新", "老"]
                },
                grid: {
                    top: "40px",
                    left: "50px",
                    right: "35px",
                    bottom: "40px"
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: [],
                    axisLabel: {
                        textStyle: {
                            color: "#70C5FF",
                            fontSize: 13,
                        }
                    }
                },
                yAxis: {
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#70C5FF",
                            fontSize: 13,
                        }
                    }
                },
                series: [
                    {
                        // name: "男",
                        type: "line",
                        stack: "Total",
                        smooth: true,
                        areaStyle: {},
                        emphasis: {
                            focus: "series"
                        },
                        data: []
                    }
                ]
            },
            optionfive: {
                tooltip: {
                    trigger: "item",
                    backgroundColor: "rgba(20, 31, 59, 0.7)",
                    textStyle: {
                        color: "#000"
                    }
                },
                xAxis: {
                    type: "category",
                    data: [],
                    axisLabel: {
                        textStyle: {
                            color: "#000",
                            fontSize: 13,
                        }
                    }
                },
                yAxis: {
                    type: "value",
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#000",
                            fontSize: 13,
                        }
                    }
                },
                grid: {
                    top: "40px",
                    left: "50px",
                    right: "25px",
                    bottom: "40px"
                },
                series: [
                    {
                        data: [],
                        type: "bar",
                        showBackground: true,
                        backgroundStyle: {
                            color: "rgba(2, 13, 50, 0.3)",
                            borderRadius: 10
                        },
                        barWidth: 13,
                        itemStyle: {
                            borderRadius: 10,
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "#1251D2"
                                    },
                                    {
                                        offset: 1,
                                        color: "#1BDFFC"
                                    }
                                ]
                            }
                        }
                    }
                ]
            },
            managementCenter: [],
            admin_id: '',
            // 总任务数
            wj_trade_total_census: "",
            // 问卷总数
            wjdc_total: "",
            prize_nums: [],
            dataAnalyzeList: {},
            wj_trade_sx: [],
            // day_wj_trade_sx: [],
            cy_people: [],
            role: "",
            time: [],
            prize_total_money: 0,
            prize_sy_money: 0,
            prize_zj_money: 0,
        };
    },
    mounted() {
        // this.getColumnsData()
        this.getManagementCenter()
        this.getnewlist()
        this.getTime()
        this.getDataAnalyze()
    },
    methods: {
        getDataAnalyze() {
            post({
                url: "/admin/answer.Census/my_census"
            }).then(res => {
                this.dataAnalyzeList = res
            })
        },
        // 定时弹消息框
        getTime() {
            post({
                url: "/admin/answer.Census/pop",
            }).then(res => {
                console.log(res);
                this.dialogVisible = res.open_status ? false : true
                this.showTitle = res.content
            })
        },
        // 弹窗关闭回调
        close() {

        },
        onChange(index) {
            this.index = index;
        },
        onChange2(index2) {
            this.index2 = index2;
        },
        async getColumnsData() {
            const result = await post({
                url: "/admin/answer.Subject/census",
                params: {}
            });
            this.answer_total = result.answer_total;
            this.day_answer_total = result.day_answer_total;
            this.db_total = result.db_total;
            this.day_db_total = result.day_db_total;

            this.yx_total = result.yx_total;
            // this.option1.xAxis[0].data = result.q_total.time;
            // this.option2.xAxis[0].data = result.q_gd_total.time;
            // this.option1.series[0].data = result.q_total.count;
            // this.option2.series[0].data = result.q_gd_total.count;
        },
        changeindex(result) {
            console.log(result, 'result')
            // this.index = index;selectindex
        },
        // 获取管理中心列表
        getManagementCenter() {
            post({
                url: "/admin/answer.Subject/adminuser_info"
            }).then(res => {
                this.role = res.role
                localStorage.setItem("role", res.role);
                localStorage.setItem("id", res.id);
                localStorage.setItem("userList", JSON.stringify(res));

            })
            post({
                url: "/admin/answer.Subject/admin_list"
            }).then(res => {
                this.managementCenter = res
            })
        },
        changeid(result) {
            this.id = result
            this.admin_id = result
            this.getnewlist()
        },
        selectindex(result) {
            console.log(result, 'result')
            this.type = result
            this.getnewlist()
        },
        getnewlist() {

            let adminId = localStorage.getItem('id')

            post({
                url: '/admin/answer.Census/index',
                data: {
                    id: this.id,
                    type: this.type,
                    admin_id: this.admin_id
                },
                loading: true
            }).then(res => {
                this.prize_total_money = res.prize_total_money
                this.prize_sy_money = res.prize_sy_money
                this.prize_zj_money = res.prize_zj_money
                this.rt_total = res.rt_total
                this.yb_total = res.yb_total
                this.brt_total = res.brt_total
                this.wj_trade_total_census = res.wj_trade_total_census
                this.wjdc_total = res.wjdc_total
                this.wj_trade_sx = res.wj_trade_sx
                // this.day_wj_trade_sx = res.day_wj_trade_sx
                this.day = res.today_wj_people_num
                console.log(this.day, "today_wj_people_num");
                this.cy_people = res.cy_people
                this.people_total = res.people_total
                this.today_wj_people_total = res.today_wj_people_total
                this.prize_nums = res.prize_nums
                this.option1.yAxis.data = res.admin_name
                this.option1.series[0].data = res.wj_total
                this.option1.series[1].data = res.wj_trade_total

                if (res.wj_trade_total.length) {
                    total = res.wj_trade_total.reduce((a, b) => {
                        return a + b
                    })
                }

                this.today_wj_total = res.today_wj_total
                this.optiomtre.series[0].data = res.identity_total
                // console.log(res.identity_total, "res.identity_total");
                this.newoption.series[0].data = res.work_total_value
                this.option2.yAxis.data = res.prize_total_num
                this.option2.series[0].data = res.prize_total_name
                this.optionfour.series[0].data = res.cy_people
                // this.optionfour.xAxis.data = res.time
                this.time = res.time
                this.optionfive.series[0].data = res.department_num
                this.optionfive.xAxis.data = res.department_name
                console.log(this.optionfour.series[0].data, this.optionfour.xAxis.data)
            })
        }
    }
};
</script>
<style scoped>
.boxbox {
    display: flex;
    width: 100%;
    margin-top: 20px;
    justify-content: space-around;
    /* flex-wrap: wrap; */
    /* background-image: url("~@/assets/img/01.png"); */
    /* background-size: 100% 100%; */

    /* height: 100%; */
}

.infobox {
    display: flex;
    width: 33.3%;
    display: flex;
    flex-direction: column;
}

.boxsize {
    width: 100%;
}

.boxchange {
    width: 33.3%;
    margin: 0 auto;
    background-image: url("~@/assets/img/43.png");
    background-size: 100% 100%;
    color: #23cefd;
}

::v-deep .el-dialog__title {
    font-size: 32px;
    font-weight: 600;
}

.showTitle {
    padding: 0 36px 36px 36px;
    font-size: 20px;
    text-indent: 2em;
    color: #222;
}
</style>